<template>
  <div class="zyImage" ref="zyImage" :name="value">
    <el-image :src="value || defaultImg" :preview-src-list="value?[value]:[]" class="imageContent"
              :class="[isTra? 'trans': '',border? 'image-border': '', dashed? 'image-border-dashed':'']"
              :style="{width: width+'px', height: height + 'px', top: top + 'px', left: left +'px'}"></el-image>
    <i class="zy-iconfont zy-imgDel del_img" @click.stop="removeImage" v-if="!readonly"></i>
  </div>
</template>

<script>

	export default {
		name: "zyImage",
		props: {
			value: {
				type: String,
				default: () => ''
			},
			readonly: {
				type: Boolean,
				default: () => false
			},
			border: {
				type: Boolean,
				default: () => false
			},
			dashed: {
				type: Boolean,
				default: () => false
			},
			previewSrcList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				isTra: false,
				top: '0',
				left: '0',
				width: '',
				height: '',
				defaultImg: require('@/assets/common/noImg.png')
			}
		},
		computed: {
		},
		watch: {
			value(){
				this.detectImage()
      }
    },
		methods: {
			detectImage() {
				let img = new Image(),
					that = this,
					width = this.width,
					height = this.height;
				img.src = this.value;
				img.onload = function () {
					if (img.width < img.height) {
						that.isTra = true;
						that.width = height;
						that.height = width;
						that.left = width;
					}
				};
			},
			removeImage() {
				this.$confirm("是否删除该照片?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
					customClass: 'message',
					closeOnClickModal: false
				}).then(() => {
					this.$emit('removeImage', '');
					this.$emit('input', '');
					this.$message.success('删除成功！');
				}).catch(() => {
					this.$message("已取消删除");
				});
			},
		},
		mounted() {
			this.width = this.$refs.zyImage.offsetWidth;
			this.height = this.$refs.zyImage.offsetHeight;
			this.detectImage();
		},
		created() {
		}
	}
</script>

<style lang="less" :scope="true">
  @import "../../style/common/base.less";

  @imageBorderColor: #d9d9d9;
  .zyImage {
    width: 100%;
    height: 100%;
    position: relative;

    .imageContent {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 5px;

      &.trans {
        transform: rotate(90deg);
        transform-origin: left top;
      }

      &.image-border {
        border: 1px solid @imageBorderColor;
      }

      &.image-border-dashed {
        border: 1px dashed @imageBorderColor;
      }
    }

    /*.hideImage {*/
    /*  position: absolute;*/
    /*  top: 0;*/
    /*  left: 0;*/
    /*  !*opacity: 0;*!*/
    /*  width: 100%;*/
    /*  height: 100%;*/

    /*  &.show {*/
    /*    opacity: 1;*/
    /*  }*/
    /*}*/

    .del_img {
      display: none;
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 20px;
      cursor: pointer;
      color: @allDangerColor;
    }

    &:hover {
      .del_img {
        display: block;
      }
    }
  }
  @media screen and (max-width: 1200px) {
    .zyImage .del_img{
      display: block;
    }
  }

</style>
